<div id="update" class="displaynone">
    <div>
        <div class="row" style="margin-top:20px;margin-bottom:20px;" v-show="loading">
            <div class="loader">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
<!-- 修改或添加 -->
        <div class="row" style="margin-top:20px;margin-bottom:20px;" v-show="!loading">
            <form name="myForm" id="defaultForm" novalidate>
                <div class="col-md-12">
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;">酒店名称 :</p>
                        </div>
                        <div class="col-md-4 form-group">
                            <input type="text" name="hotelName" class="form-control" placeholder="酒店名称" v-model="oneData.title">
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;">酒店地址 :</p>
                        </div>
                        <div class="col-md-4 form-group">
                            <input type="text" name="hotelAddress" class="form-control" placeholder="酒店地址" v-model="oneData.address">
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;">备注 :</p>
                        </div>
                        <div class="col-md-4 form-group">
                            <input type="text" name="mark" class="form-control" placeholder="备注" v-model="oneData.memo_info">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;"> </p>
                        </div>
                        <button  class="btn btn-primary ajax-post" v-on:click="save()">保存</button>
                        <router-link to="/"><button class="btn btn-default active">返回</button></router-link>
                    </div>
                </div>
            </form>
        </div>

        <div class="modal fade" id="ModalOK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">提示</h4>
                    </div>
                    <div class="modal-body">
                        保存成功
                    </div>
                    <div class="modal-footer">
                        <router-link to="/"><button type="button" class="btn btn-primary" data-dismiss="modal">确定</button></router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var updatedata={
        loading:true,
        Id:0,
        oneData:{}
    };

    const Update = {
        template:$('#update').html(),
        data:function () {
            return updatedata;
        },
        created () {
            // 组件创建完后获取数据，
            var _self=this;
            this.loading=true;

            if(this.$route.params.id=='one'){
                this.Id=0;
                this.oneData={};
                setTimeout(function(){_self.loading=false;},1000);
            }else{
                this.Id = this.$route.params.id.id;
                this.oneData={};
                this.fetchData();
            }

            setTimeout(function () {
                $('#defaultForm').bootstrapValidator({
                    excluded: [":disabled"],
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    live: 'enabled',
                    fields: {
                        hotelName: {
                            validators: {
                                notEmpty: {
                                    message: '酒店名称不能为空！'
                                }
                            }
                        }
                    }
                })
            }, 1000);
        },
        //获取数据
        methods:{
            save:function() {
                var _self = this;
                if (this.$route.params.id == 'one') {
                    var method = 'post';
                    var url = '/hotel';
                } else {
                    var method = 'put';
                    var url = '/hotel/' + _self.Id;
                }

                if(_self.oneData.title==undefined){
                    alert('请填写信息！');
                }else{
                    $.ajax({
                        url: url,
                        type: method,
                        dataType: 'json',
                        data: _self.oneData,
                        success: function (data) {
                            if(data.status==1){
                                $('#ModalOK').modal('show');
                                setTimeout(function() {
                                    $('#ModalOK').modal('hide');
                                    _self.$router.push({path:'/'});
                                }, 1000);
                            }else{
                                alert('新增失败，请重试！');
                                _self.loading=false;
                            }
                        },
                        error: function () {
                            alert('操作失败，请重试！');
                        }
                    })
                }
            },

            fetchData:function(){
                var _self=this;
                $.ajax({
                    url: "/hotel/hotel/getOneData?id="+_self.Id,
                    type: "get",
                    dataType:'json',
                    success:function(data){
                        if(data.status==1){
                            _self.oneData = {};
                            _self.oneData = data.data;
                            setTimeout(function(){_self.loading=false;},500);
                        }
                    },
                    error:function(){alert('获取数据失败，请重试！');},
                })
            }
        }
    }

</script>